import { Card } from 'antd-mobile'
import { useSelector } from 'react-redux'
import styles from '../css/ticket-order.module.css'
import { useEffect, useState } from 'react'
// 1. 导入事件总线对象
import eventBus from '../../../utils/eventBus'

function ChooseSeat() {
  // 选取 Store 中乘客的数组，用户循环生成每一排的座位
  const passengers = useSelector((store) => store.order.passengers)
  // 用于循环生成每一列的座位
  const arr1 = ['a', 'b', 'c']
  const arr2 = ['d', 'f']
  const [seats, setSeats] = useState([])

  // 点击座位，添加到 seats 数组中
  const addSeat = (i, v) => {
    const seatNo = `${i}-${v}`

    if (seats.includes(seatNo)) {
      // 先判断点击的座位，是否已经被选中了，
      // 如果是，则从 seats 中移除这个座位
      const temp = seats.filter((x) => x !== seatNo)
      setSeats(temp)
    } else {
      // 点击的座位，没有被选中过，需要添加到数组中
      if (seats.length >= passengers.length) {
        // 座位已经选满了，需要移除最早选择的座位，再添加新座位
        const temp = seats.slice(1)
        temp.push(seatNo)
        setSeats(temp)
      } else {
        // 座位没有选满，直接添加即可
        setSeats([...seats, seatNo])
      }
    }
  }

  // 判断每个座位是否应该被高亮
  const isActive = (i, v) => {
    return seats.includes(`${i}-${v}`) ? styles.active : ''
  }

  useEffect(() => {
    // 判断 乘客数是否 < 已选座位 的数量，
    // 如果条件成立，则清空已选择的座位
    if (passengers.length < seats.length) {
      setSeats([])
    }
  }, [passengers, seats])

  useEffect(() => {
    // 2. 发送数据
    eventBus.emit('share', seats)
  }, [seats])

  return (
    <div className={styles.chooseSeat}>
      <Card title="选择座位">
        <div className={styles.row}>
          <div>窗</div>
          <div>
            {/* 循环生成每一排的座位 */}
            {passengers.map((item, index) => (
              <div
                className={styles.seatBox}
                key={index}
              >
                {/* 循环生成每一排座位中的每一列座位 */}
                {arr1.map((v, i) => (
                  <span
                    key={i}
                    className={[
                      'iconfont',
                      'icon-seat' + v,
                      styles.iconSeat,
                      isActive(index, v)
                    ].join(' ')}
                    onClick={() => addSeat(index, v)}
                  ></span>
                ))}
              </div>
            ))}
          </div>
          <div>过道</div>
          <div>
            {/* 循环生成每一排的座位 */}
            {passengers.map((item, index) => (
              <div
                className={styles.seatBox}
                key={index}
              >
                {/* 循环生成每一排座位中的每一列座位 */}
                {arr2.map((v, i) => (
                  <span
                    key={i}
                    className={[
                      'iconfont',
                      'icon-seat' + v,
                      styles.iconSeat,
                      isActive(index, v)
                    ].join(' ')}
                    onClick={() => addSeat(index, v)}
                  ></span>
                ))}
              </div>
            ))}
          </div>
          <div>窗</div>
        </div>
      </Card>
    </div>
  )
}

export default ChooseSeat
